<template>
    <div id="layout_sider_left" class="layout_sider_left" :style="style">
        <keep-alive>
            <component :is="views"></component>
        </keep-alive>

        <ul v-show="store.ViewStatus !== 'Statistics'">
            <li @click="extendedBtn">{{ SidlerTxt }}</li>
            <ul id="article" @mouseleave="mouseleaveEvent('ul')">
                <li
                    v-for="(item, index) in storeSiderFlData.SiderLeftListData"
                    :key="index"
                    :style="{ color: index === idx ? '#23FFFC' : '#fefefe' }"
                    @click="changeData(item, index)"
                    @mouseover="state.showChildren = item.name"
                    @mouseleave="mouseleaveEvent('li')"
                >
                    <span>{{ item.name }}</span>
                    <!--右箭头-->
                    <img v-if="item.children" :src="index === idx ? rightActive : rights" alt="" />
                    <!--子菜单-->
                    <ul v-if="item.children && state.showChildren === item.name" class="childrenClass">
                        <li
                            v-for="(r, idxs) in item.children"
                            :key="idxs"
                            :style="{ color: childrenName === r.name ? '#23FFFC' : '#fefefe' }"
                            @click="changeChildrenData(r, idxs)"
                        >
                            {{ r.name }}
                        </li>
                    </ul>
                </li>
            </ul>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { watch, markRaw, ref, onMounted, reactive } from 'vue';
import type { Component } from 'vue';
import { storeToRefs } from 'pinia';
import rightActive from '@img/rightActive.png';
import rights from '@img/rights.png';
import { CheckSiderView, SiderLeftListStore } from '@/store/index';
import SIDERLEFT from '@/components/common/PageScreen/index';

const {
    OverviewSiderLeft,
    SecurityCheckSiderLeft,
    GreenInitiativeSiderLeft,
    GreenWaterQualitySiderLeft,
    SecuritySiderLeft,
    EnergySiderLeft,
    EmergencySiderLeft,
    EmergencyTabSiderLeft,
    StatisticsSiderLeft
} = SIDERLEFT;

const store = CheckSiderView();
const storeSiderFlData = SiderLeftListStore();
const { ViewStatus, ShowStatus } = storeToRefs(store);

const stateObj: ViewSider.HitViewStatus = {
    OverView: markRaw(OverviewSiderLeft),
    SecurityCheck: markRaw(SecurityCheckSiderLeft),
    GreenInitiative: markRaw(GreenInitiativeSiderLeft),
    GreenInitiativeWaterQuality: markRaw(GreenWaterQualitySiderLeft),
    Security: markRaw(SecuritySiderLeft),
    Energy: markRaw(EnergySiderLeft),
    Emergency: markRaw(EmergencySiderLeft),
    EmergencyTab: markRaw(EmergencyTabSiderLeft),
    Statistics: markRaw(StatisticsSiderLeft)
};
const state = reactive({
    showChildren: '',
    mouseleaveTimer: 0 as any
});
const style = ref('transform: translateX(0)');
const views = ref<Component>(OverviewSiderLeft);
const idx = ref<number>(0);
const childrenName = ref<string | null>(null);
const SidlerTxt = ref<string>('收起');

/** 点击左侧菜单 */
const changeData = (item: ViewSider.SiderLeftListDataInfo, index: number) => {
    idx.value = index;
};
/** 左侧子菜单 */
const changeChildrenData = (item: ViewSider.SiderLeftListDataInfo, index: number) => {
    childrenName.value = item.name;
};
/** 展开，收起 */
const extendedBtn = () => {
    const article = document.getElementById('article') as HTMLElement;
    article.classList.toggle('expanded');
    SidlerTxt.value = SidlerTxt.value === '收起' ? '展开' : '收起';
};
const mouseleaveEvent = (type: string) => {
    state.mouseleaveTimer = setTimeout(() => {
        state.showChildren = '';
    }, 300);
    clearTimeout(state.mouseleaveTimer);
    if (type === 'ul') {
        state.showChildren = '';
    }
};
/** 监听视图更新 */
watch(
    ViewStatus,
    (val: string) => {
        if (stateObj[val as ViewSider.PickState]) {
            views.value = stateObj[val as ViewSider.PickState];
            idx.value = 0;
        }
    },
    { immediate: true }
);
/** 监听视图显示隐藏 */
watch(
    ShowStatus,
    val => {
        const box = document.getElementById('layout_sider_left') as HTMLElement;
        const boxwidth = (box?.offsetWidth as number) + 16;
        style.value = `transform:translateX(${val ? '0' : `-${boxwidth}px`})`;
    },
    { immediate: true }
);

onMounted(() => {
    // xxx
});
</script>
<style scoped lang="scss">
#article {
    /* 增加过渡时间以适应高度 */
    transition: all 0.3s linear;
    width: 90px;
}

#article.expanded {
    height: 0px;
    overflow-y: hidden;
    transition: height 1s linear;
}

.layout_sider_left {
    position: absolute;
    top: 58px;
    left: 16px;
    width: 19%;
    height: 90.3%;
    z-index: 2;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
    transform: translateX(0);
    transition-property: all;
    > ul {
        position: absolute;
        right: -90px;
        top: 57px;
        width: 81px;
        li {
            background: url('@img/leftText.png') no-repeat;
            width: 81px;
            height: 33px;
            line-height: 33px;
            background-size: 100% 100%;
            text-align: center;
            font-size: 12px;
            margin-bottom: vh(10);
            cursor: pointer;
            color: #fefefe;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                width: 12px;
                height: 12px;
                display: inherit;
                margin-left: 4px;
            }
            .childrenClass {
                position: absolute;
                right: -87px;
                top: 0;
            }
        }
    }
}
</style>
